<template>
	<view class="page-container">
		<!-- 顶部搜索区域 -->
		<view class="search-section">
			<view class="time-picker" @click="$refs.calendar.open()">
				<view>{{start || '开始时间'}}</view>
				<view style="margin: 0 20rpx;">~</view>
				<view>{{end || '结束时间'}}</view>
			</view>
			
			<view class="selected" @click="$refs.picker.open()">
				<text style="margin-right: 5rpx;">{{typeName || '请选择'}}</text>
				<uv-icon name="arrow-down" size="28rpx"></uv-icon>
			</view>
		</view>
		
		<!-- 酒店列表 -->
		<z-paging ref="paging" v-model="dataList" :defaultPageSize="30" :hideNoMoreByLimit="30" @query="queryList" :fixed="false" style="flex: 1">
			<view class="hotel-card" v-for="(hotel, index) in dataList" :key="index" @click="openDetail(hotel)">
				<view class="hotel-image">
					<image :src="hotel.picture" mode="aspectFill"></image>
					<view class="hotel-tags">
						<text class="tag">{{ hotel.name }}</text>
					</view>
				</view>
				<view class="hotel-info">
					<view class="hotel-name">{{ hotel.bedInfo }}</view>
					<view class="hotel-features">
						<text class="feature">{{ hotel.floorInfo }}</text>
						<text class="feature">{{ hotel.roomSize }}</text>
					</view>
					<view class="hotel-price-book">
						<view class="price">
							<text class="price-unit">¥</text>
							<text class="price-value">{{ hotel.price.toFixed(2) }}</text>
						</view>
						<button class="book-btn" :style="hotel.availableRoomCount == 0 ? {background: '#dcdcdc'} : {}" size="mini" type="primary">立即预订</button>
					</view>
				</view>
			</view>
		</z-paging>
		
		<uv-picker ref="picker" :columns="columns" @confirm="confirm"></uv-picker>
				
		<uv-calendar ref="calendar" mode="range" @confirm="dateTimeConfirm"></uv-calendar>
	</view>
</template>
<script>
	import { BASE_URL_ZJ } from '@/api/config';
	
	export default {
		data() {
			return {
				type: '',
				typeName: '',
				columns: [
					['单人间', '标间', '机麻房', '电竞房']
				],
				start: '',
				end: '',
				dataList: [
				]
			}
		},
		
		onLoad() {
			const oneDay = 24 * 60 * 60 * 1000;
			const todayDay = new Date();
			const tomorrow = new Date(todayDay.getTime() + oneDay);
			const tYear = todayDay.getFullYear();
			const tMonth = todayDay.getMonth() + 1;
			const tDay = todayDay.getDate();
			const lYear = tomorrow.getFullYear();
			const lMonth = tomorrow.getMonth() + 1;
			const lDay = tomorrow.getDate();
			this.start = `${tYear}-${String(tMonth).padStart(2, 0)}-${String(tDay).padStart(2, 0)}`;
			this.end = `${lYear}-${String(lMonth).padStart(2, 0)}-${String(lDay).padStart(2, 0)}`;
		},
		
		methods: {
			async queryList(pageNum, pageSize) {
			  try {
					uni.request({
						url: BASE_URL_ZJ + '/roomType/availableRoomType',
						data: {
							code: this.type,
							start: this.start,
							end: this.end,
							pageNum,
							pageSize
						},
						method: 'POST',
						success: res => {
							this.$refs.paging?.complete(res.data.data.rows);
						}
					})
			  } catch (error) {
			    this.$refs.paging?.complete(false);
			  }
			},
			
			openDetail(item) {
				if (item.availableRoomCount) {
					uni.navigateTo({
						url: `/pages/hotel/detail?id=${item.id}&start=${this.start}&end=${this.end}`
					})
				}
			},
			
			confirm(e) {
				this.typeName = e.value[0]
				this.type = e.indexs[0] + 1;
				this.$refs.paging.reload();
			},
			
			dateTimeConfirm(e) {
				this.start = e[0];
				this.end = e[e.length - 1];
				this.$refs.paging.reload();
			},
		}
	}
</script>
<style>
	page {
		height: 100%;
	}

	.page-container {
		display: flex;
		flex-direction: column;
		height: 100%;
		background-color: #f5f5f5;
	}

	.search-section {
		padding: 20rpx;
		background: #fff;
		flex-shrink: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	
	.selected {
		display: flex;
		font-size: 28rpx;
		margin-left: 30rpx;
	}
	
	.time-view {
		background-color: #FFFFFF;
		padding: 10rpx 30rpx;
		display: flex;
	}
	
	.time-picker {
		background-color: #f5f5f5;
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		border-radius: 20rpx;
	}

	.hotel-list {
		flex: 1;
		overflow: auto;
		padding: 20rpx;
	}

	.hotel-card {
		background: #fff;
		border-radius: 12px;
		margin-bottom: 20rpx;
		overflow: hidden;
	}

	.hotel-image {
		position: relative;
		height: 400rpx;
	}

	.hotel-image image {
		width: 100%;
		height: 100%;
	}

	.hotel-tags {
		position: absolute;
		top: 20rpx;
		left: 20rpx;
	}

	.tag {
		background: rgba(0, 0, 0, 0.6);
		color: #fff;
		padding: 4rpx 16rpx;
		border-radius: 4px;
		font-size: 12px;
	}

	.hotel-info {
		padding: 20rpx;
	}

	.hotel-name {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 16rpx;
	}

	.hotel-rating {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.rating-text {
		margin-left: 10rpx;
		color: #ff9500;
		font-size: 14px;
	}

	.comment-count {
		margin-left: 10rpx;
		color: #666;
		font-size: 12px;
	}

	.hotel-location {
		display: flex;
		align-items: center;
		color: #666;
		font-size: 12px;
		margin-bottom: 16rpx;
	}

	.hotel-features {
		margin-bottom: 16rpx;
	}

	.feature {
		display: inline-block;
		background: #f5f5f5;
		color: #666;
		padding: 4rpx 16rpx;
		border-radius: 4px;
		font-size: 12px;
		margin-right: 10rpx;
	}

	.hotel-price-book {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.price {
		display: flex;
		align-items: baseline;
	}

	.price-unit {
		font-size: 12px;
		color: #ff5a5f;
	}

	.price-value {
		font-size: 20px;
		font-weight: bold;
		color: #ff5a5f;
	}

	.price-desc {
		font-size: 12px;
		color: #666;
		margin-left: 4rpx;
	}

	.book-btn {
		background: #ff5a5f;
		margin: 0;
		margin-right: 30rpx;
	}
</style>